<template>
    <div class="img-details-area">
        <!--头大图-->
        <div class="detail-image">
            <img :src="artData['image']">
        </div>
        <!--文案-->
        <div class="detail-doc">
            <h3 class="doc-title" v-html="artData['title']"></h3>
            <em class="doc-sub" v-html="artData['subTitle']"></em>
            <div class="doc-message clearfix">
                <span class="article-title">{{artData['column']}} &nbsp;|&nbsp; {{artData['PublishDate']}} <strong v-if="artData['author']" style="font-weight: normal;">&nbsp;|&nbsp; by&nbsp;{{artData['author']}}</strong></span>
                <span class="keep">
                    <!-- （基数 + 接口浏览量）超过万显示万，小余万，显示当前增加后的数字  -->
                    <i class="icon-keep" v-if="parseInt(artData['pageViewDefault']) + parseInt(artData.view)" :style="'background-image: url(' + require('../../../assets/image/discover/b_01.png') + '); background-size: contain; background-repeat: no-repeat;'"></i>
                    <span style="float:left; color: #b0bbc5; display: none;" v-show="parseInt(artData['pageViewDefault']) + parseInt(artData.view)">{{(parseInt(artData['pageViewDefault']) + parseInt(artData.view))>10000 ? parseInt((parseInt(artData['pageViewDefault']) + parseInt(artData.view))/10000) : parseInt((parseInt(artData['pageViewDefault']) + parseInt(artData.view)))}}</span>
                    <b v-show="(parseInt(artData['pageViewDefault']) + parseInt(artData.view))>10000" style="color: #b0bbc5; float:left; font-weight: normal;">万</b>
                </span>
            </div>
            <!--<span class="author">by &nbsp;&nbsp;{{artData['author']}}</span>-->
            <div class="doc-main">
                <div v-html="artData['content']"></div>
            </div>
        </div>
        <!--<div class="recommend" v-if="listMsg && (JSON.stringify(listMsg) !== '[]')">
            <div class="rec">相关推荐</div>
            <list-box :listbox="listMsg"></list-box>
            <div v-if="listMsg && listMsg.length > 1" class="last-end">~油门到底了~</div>
        </div>-->
    </div>
</template>

<script>
    
import common from "../../../assets/js/common.js";   
import listBox from './../common/listbox';
import url from 'url';
import qs from 'querystring';
import Vue from 'vue';

export default {
    data() {
        return {
           detailId: 0, // 文章id
           artData: [], // 文章信息 
           
           listMsg: []
        }
    },
    components: {listBox},
    mounted () {
        var me = this;
        
        var targ = url.parse(window.location.href).query;
        var queryObj = qs.parse(targ);
        me.artColumn = queryObj['artColumn']; // 当前类目  
        me.artId = queryObj['artId']; // 栏目id
        
        me.getArticle();
        
        // 推荐列表 
        me.recList();
        
    },
    methods: {
        
        /**
         * 获取文章
         */
        getArticle: function() {
            var me = this;
            
            // 文章详情页接口
            me.$http.get(common.isdev() + '/cxb/app/discover/discoveydetail/index.shtml', {}).then(function(d) {
                var data = me.parseData(d.body);
                if (data.errorCode == 0) {
                    var result = data.result.creditTradeVOs;
                    var resultLen = result.length;
                    var tmpObj = {}; 
                    while (resultLen--) {
                        // 过滤当前 文章
                        if (result[resultLen]['id'] == me.artId) {
                            tmpObj = result[resultLen];
                        }
                    }
                    
                    // 读取浏览量
                    me.reading(tmpObj);
                    // 增加浏览量
                    me.addReading(tmpObj);
                }
                
            });
        },
        
        /**
         * 读取浏览量
         */
        reading: function(data) {
            var me = this;
            var milieuObj = {
                'prod':'chexiang',
                'pre':'chexiangpre',
                'sit':'chexiangsit',
                'development': 'chexiangpre' 
            }
            var host = '//cxjapp.'+milieuObj[process.env.NODE_ENV]+'.com';
            if (me.isEmptyObject(data)) {
                // 阅读量接口
                Vue.http({
                    url: host + '/service/discovery/getPageView/0.htm',
                    params: {"articleId": sessionStorage.getItem('id') || data['id']},
                    method: 'JSONP',
                    jsonp: 'jsonp'
                }).then(function (response){
                    var d = JSON.parse(response.bodyText);
                    if (d.errorCode == 0) {
                        // 处理浏览量
                        data['view'] = d.result;
                    }
                    // 转换实体
                    if (data['content']) {
                        data['content'] = me.htmlDecodeByRegExp(data['content']);
                        
                        // 设置title
                        document.title = me.htmlDecodeByRegExp(data['title']);
                    } else {
                        data['content'] = '暂无内容';
                    }
                    
                    // 转换栏目
                    var objCloumn = {
                        'artlist_001': '洗车', 
                        'artlist_002': '美容',
                        'artlist_003': '保养',
                        'artlist_004': '轮胎'
                    }
                    data['column'] = objCloumn[data['artColumn']];
                    
                    // 推荐列表
                    me.artData = data;
                });
            } 
        },
        
        /**
         * 增加阅读量
         */
        addReading: function(data) {
            var me = this;
            var milieuObj = {
                'prod':'chexiang',
                'pre':'chexiangpre',
                'sit':'chexiangsit',
                'development': 'chexiangpre' 
            }
            var host = '//cxjapp.'+milieuObj[process.env.NODE_ENV]+'.com';
            if (me.isEmptyObject(data)) {
                // 阅读量接口
                Vue.http({
                    url: host + '/service/discovery/addPageView/0.htm',
                    params: {"articleId": sessionStorage.getItem('id') || data['id']},
                    method: 'JSONP',
                    jsonp: 'jsonp'
                }).then(function (response){
                    console.log('浏览量+1');                    
                });
            } 
        },
        
        /**
         * 推荐列表
         */
        recList: function() {
            var me = this;
            var listData = [];
            
            // 相同栏目
            me.$http.get(common.isdev() + '/cxb/app/discover/discoveydetail/index.shtml', {}).then(function(d) {
                var data = me.parseData(d.body);
                
                if (data.errorCode == 0) {
                    var len = data.result.creditTradeVOs.length;
                    var tmpData = data.result.creditTradeVOs;
                    
                    // 拼接url
                    while(len--) {
                        // type  [1,视频] [2, 文章] 
                        if (tmpData[len].type == 1) {
                            tmpData[len]['detailsUrl'] = common.path()+'/discover/videodetails/videodetails.'+common.isHtml()+'?artColumn=' + tmpData[len]['artColumn'] + '&artId=' + tmpData[len]['id'];
                        } else if(tmpData[len].type == 2) {
                            tmpData[len]['detailsUrl'] = common.path()+'/discover/imgdetsils/imgdetsils.'+common.isHtml()+'?artColumn=' + tmpData[len]['artColumn'] + '&artId=' + tmpData[len]['id'];
                        }
                    }
                    
                    // 获取 sessionStorage 中的 版本，平台，cityCode信息
                    var appVersion = sessionStorage.getItem('appVersion') || '3.6'; // 默认版本
                    var plateformType = sessionStorage.getItem('plateformType') || 'both'; // 默认平台 both android 和 ios 都可用 
                    var cityCode = sessionStorage.getItem('cityCode') || '310100'; // 城市code
                    
                    // 过滤版本&过滤系统
                    var listArr = [];
                    for (var i=0; i<tmpData.length; i++) {
                        if (tmpData[i]['appVersion'] != appVersion && (plateformType || tmpData[i]['plateformType'] == plateformType)) {
                            listArr.push(tmpData[i]);
                        }
                    }
                    
                    var tmpListArr = [];
                    // 过滤当前栏目
                    for(var i=0; i<listArr.length; i++) {
                        if (listArr[i]['artColumn'] == me.artColumn) {
                            tmpListArr.push(listArr[i]);
                        }
                    }
                    
                    // 业务分类 分组   // map  {a: [{}, {}, {}], b: [{}] }
                    var objMap = {};
                    for(var i=0; i<tmpListArr.length; i++) { // bizCategory [业务分类]
                        var artColumns = tmpListArr[i]['artColumn'];
                        if (objMap[artColumns]) { // 判断`bizCategory` 的value 值 
                            objMap[artColumns].push(tmpListArr[i]); 
                        } else {
                            var _listArr = [];
                            _listArr.push(tmpListArr[i]); // [{}, {}, {}]
                            objMap[artColumns] = _listArr;
                        }
                    }
                    
                    // 分组  // 按 objMap key的value遍历   // [{}, {}, {}]
                    // 是否显示  和  是否当前城市  
                    var availableDetails = []; 
                    for(var j in objMap) {
                        if (objMap[j].length == 1 && objMap[j].isShow == 1) { // isShow （1【显示】 0【隐藏】）  
                            // 判断是否全国 
                            if (objMap[j]['generic'] == 1) { // generic （1【全国显示】 0【全国隐藏】）
                                availableDetails.push(objMap[j]);
                            } else if (objMap[j]['cityCode'] == cityCode) {
                                availableDetails.push(objMap[j]);                                
                            }
                        } else {
                            var tmp = objMap[j];  //  {a: [{}, {}, {}], b: [{}] }
                            for(var m=0; m<tmp.length; m++) {
                                // 解析城市code
                                var codeArr = tmp[m]['cityCode'].split(',');
                                for(var t=0; t<codeArr.length; t++) {
                                    if (tmp[m]['generic'] == 1) {
                                    // 全国
                                        availableDetails.push(tmp[m]);
                                        break;
                                    } else if (tmp[m].isShow == true && codeArr[t] == cityCode) {
                                    // 各个城市
                                        availableDetails.push(tmp[m]);
                                    }
                                }
                            }
                        }
                    }
                    
                    var info = [];
                    // 过滤当前id的详情
                    for (var t=0; t<availableDetails.length; t++) {
                        if (availableDetails[t]['id'] != me.artId){
                            info.push(availableDetails[t]);
                        }
                    }
                    
                    // 读取阅读量
                    me.read(info);
               }
                
            });
            
        },
        
        /**
         * 阅读量
         */
        read: function(data) {
            var me = this;
            var milieuObj = {
                'prod':'chexiang',
                'pre':'chexiangpre',
                'sit':'chexiangsit',
                'development': 'chexiangpre' 
            }
            var host = '//cxjapp.'+milieuObj[process.env.NODE_ENV]+'.com';
            var len = data.length;
            var num = len;
            if (data) {
                // 阅读量接口
                for(var i=0; i<len; i++) {
                    (function(i) {
                        Vue.http({
                            url: host + '/service/discovery/getPageView/0.htm',
                            params: {"articleId": data[i]['id']},
                            method: 'JSONP',
                            jsonp: 'jsonp'
                        }).then(function (response){
                            var d = JSON.parse(response.bodyText);
                            if (d.errorCode == 0) {
                                // 处理浏览量
                                data[i]['view'] = d.result;
                                num = num - 1;
                            }
                            if (num == 0) {
                                // 推荐列表
                                me.listMsg = data;
                            }
                        });
                    })(i);
                }
            } 
        },
        
        /**
         * 实体转 HTML
         * @param {String} str 带有 HTML实体的字符串
         * @return {String} str 转换成功HTML
         */
        HTMLDeCode(str) {
            if (!str || str.length == 0) return '';
            
            str = str.replace(/&amp;/g, '&'); 
            str = str.replace(/&lt;/g, '<');
            str = str.replace(/&gt;/g, '>');
            str = str.replace(/&quot;/g, "''");  
            str = str.replace(/&#039;/g, "'");  
            str = str.replace(/&#32;/g, ' ');
            return str;
        },
        
        /**
         * html转 实体  
         * @param {Object} str
         */
        htmlDecodeByRegExp: function (str){
            var s = "";
            if(s || str.length == 0) return "";
            return str
              .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
              .replace(/&lt;/g, "<")
              .replace(/&gt;/g, ">")
              .replace(/&quot;/g, "\"")
              .replace(/&#39;/g, "\'")
              .replace(/&quot;/g,"\"")
              .replace(/&amp;/g,"&")
              .replace(/&nbsp;/g," ")
              .replace(/&#32;/g, ' ');
        },
        
        /**
         * 是否是空对象
         * @param {Object} obj
         */
        isEmptyObject: function(obj) {
            return JSON.stringify(obj) === '{}' ? false : true;
        },
        
        /**
         * 解析json
         * @param {Object} data
         * @return 
         */
        parseData: function(data) {
            var _data;
            if (!data) return data;
            try{
                _data = JSON.parse(data);
            }catch(e){
                _data = data;
            }
            return _data;
        },
    }
}
    
</script>
<style>
body {
    background: #f4f4f4;
}
.mt10 {
    padding-top: 10px;
    margin-top: 0 !important;
} 
h3,h5 {
    font-weight: normal; 
}
</style>
<style lang="scss">
body,html,*{margin:0;padding:0;}
@function rem($px){
  @return $px / 10 * 1rem;
}  
  
$_fff: #fff;
$_243742: #243742; 

$sans-serif: "PingFangSC-Regular,'Helvetica Neue', Helvetica, Rotobo";
$font-family: $sans-serif;
    

$fontSize14: rem(14);
@mixin ban_line{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.last-end {
    text-align: center;
    line-height: rem(50);
    font-size: rem(12);
}
.icon-keep {
    width: rem(16);
    height: rem(16);
    float: left; 
    margin-top: rem(2); 
    margin-right: rem(6);
}

.img-details-area {
    font-family: "microsoft yahei";
}

.detail-image{
    width:100%;
    height:rem(210);
    img{
        width:100%;
        height:rem(210);
        display:block;
    }
}

.clearfix:before,
.clearfix:after {
    display: block;
    clear: both;
    content: '';
}

.detail-doc{
    padding:0 rem(14);
    margin-bottom:rem(15);
    background: #fff;
    .doc-message{
        font-family: $sans-serif;
        line-height:rem(17);
        font-size:$fontSize14;
        /*padding-top: rem(40);*/
    }
    /*类目标题*/
    .article-title{
        /*width:rem(200);*/
        font-size:$fontSize14;
        color:#b0bbc5;
        float:left;
        /*@include ban_line;//省略号*/
    }
    .keep{
        /*width:rem(70);*/
        font-size:$fontSize14;
        color:#6e6e6e;
        float: right;
        /*text-align:right;*/
        overflow:hidden;
    }
    /*标题*/
    .doc-title{
        width: 100%;
        line-height: 130%;
        color:#243742; 
        font-size: rem(24);
        font-weight: normal;
        padding-top: rem(20);
        /*@include ban_line;//省略号*/
    }
    .doc-sub{
        /*width:rem(200);*/
        line-height: 130%;
        color:#8392a0;
        font-size: rem(20);
        display:block;
        font-style: normal;
        padding: rem(10) 0 rem(20) 0;
        /*@include ban_line;//省略号*/
    }
    .author{
        width:rem(170);
        line-height:rem(17);
        color:#b0bbc5;
        font-size:$fontSize14;
        display:block;
        @include ban_line;//省略号
    }
}
.doc-main{
    margin-top:rem(20);
    padding-bottom: rem(10);
    font-size: 160%;
    p{
        color: #243742 !important;
        line-height: 160% !important;
        font-size: rem(17) !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
    }
    img{
        margin: rem(26) 0 !important;
        width:100% !important;
    }
}

.recommend{
    margin-top: rem(20);
    /*padding:rem(15);*/
}   
.rec {
    background: #fff;
    font-size: rem(16);
    padding-left: rem(10);
    padding-top: rem(10);
    line-height: rem(30);
} 

</style>